<template>
  <div>
    <van-popup
      v-model="show"
      :close-on-click-overlay="false"
      class="class-detail-popup"
    >
      <div class="institution">
        <img
          :src="$store.state.instInfo.SchoolLogo"
          class="institution-img"
        >
      </div>
      <div class="popup-info">
        <div
          v-if="shareUserInfo.UserName"
          class="invited-user-name"
        >
          {{ shareUserInfo.UserName }}邀请你
        </div>
        <div class="prompt">
          注册领取
          <span class="scholarship">
            {{ $store.state.instInfo.Scholarship }}元
          </span>
          奖学金
        </div>
        <div
          v-if="shareUserInfo.OrangeKey"
          class="recommend-code"
        >
          推荐码：{{ shareUserInfo.OrangeKey }}
        </div>
        <div class="bottom">
          <van-button
            size="small"
            type="primary"
            class="btn btn-login"
            @click="onLogin"
          >
            登录
          </van-button>
          <van-button
            size="small"
            type="primary"
            class="btn btn-look-class"
            @click="lookClass"
          >
            看课
          </van-button>
        </div>
        <div class="bottom-prompt">
          技术支持：会考吧平台
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  props: {
    isDistribution: {
      type: Boolean,
      default: false,
    },
    isScholarInst: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    let userId = this.$route.query.userId
    return {
      show: true,
      UserId: userId, // 获取链接上的分享者id
      shareUserInfo: {},
    }
  },
  created () {
    if (this.$route.query.userId) {
      this.getShareUserInfo()
    }
  },
  methods: {
    // 获取分享人用户信息
    getShareUserInfo () {
      this.$axios({
        method: 'get',
        url: 'User/InvitedInfo',
        data: {
          UserId: this.UserId,
        },
      }).then(res => {
        this.shareUserInfo = res
        if (res.OrangeKey) {
          localStorage.setItem('orangeKey', res.OrangeKey)
        }
      })
    },
    // 登录
    onLogin () {
      this.$emit('closePopup', true)
      sessionStorage.setItem('loginFromPage', JSON.stringify({
        from: this.$route.name,
        query: this.$route.query,
      }))
      this.$router.push({ name: 'login' })
    },
    // 看课
    lookClass () {
      this.show = false
      this.$emit('closePopup', true)
    },
  },
})
</script>
<style lang="scss" scoped>
.class-detail-popup {
  margin: 0 24px;
  margin: auto;
  border-radius:5px;
  text-align: center;
  width: calc(100% - 48px);
}
.institution {
  height: 145px;
  @include px1border(bottom, #E9E9E9);
}
.institution-img {
  width: 334px;
  position: relative;
  top: 50%;
  left: calc(50% - 167px);
  transform: translate(-50%,-50%);
}
.popup-info {
  font-size: 36px;
  padding: 40px 0 30px;
}
.invited-user-name {
  color: #333;
  margin-bottom: 30px;
}
.prompt {
  color: #666;
}
.scholarship {
  font-size: 48px;
  color: #c00;
}
.recommend-code {
  color: #333;
  font-size: 30px;
  margin-top: 48px;
}
.bottom {
  margin: 80px 0;
}
.btn {
  width: 266px;
  height: 70px;
  @include px1border(all, $primary-web);
  border-radius: 3px;
  &.van-button--small {
    font-size: 36px;
  }
}
.btn-login {
  color: $primary-web;
  margin-right: 50px;
  background-color: #fff;
}
.bottom-prompt {
  font-size: 24px;
  color: #999;
}
</style>
